<template>
	<div style="overflow: hidden;" v-loading="formLoading">
    <code>
      <svg-icon icon-class="message" style="margin-right:10px;color:red;font-size:20px;"></svg-icon>
      备注：前端页面只展示第一行的菜单
    </code>
		<div class="phone-container">
			<div class="phone-header"></div>
			<div class="phone-content">
				<h1>默认菜单</h1>
				<div class="nav-menu">
					<div class="icon-div" v-for="(item,index) in navData" :style="{color: item.color, margin: '0px', left: item.left+'px', top: item.top+'px', position: 'absolute'}" draggable="true" :key="index"
						  @dragstart="handleDragStart($event, item)"
			        @dragover.prevent="handleDragOver($event, item)"
			        @drop="handleDrop($event, item)"
			        @dragend="handleDragEnd($event, item)">
						<svg-icon :icon-class="item.icon" class="font-size40"/>
						<p class="font-size12">{{ item.navText }}</p>
					</div>
				</div>
			</div>
			<div class="footer-circle"></div>
		</div>
		<div style="overflow: hidden;">
			<div class="fl-l">
				<div class="inner">
					<div class="arrow-left"></div>
					<div class="border-ddd">
						<div class="">
							<p style="padding-bottom:20px">温馨提示：调整完后记得保存</p>
							<el-button type="primary" size="small" v-loading="btnLoading" @click="submitForm">保存</el-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getNavSetting, saveNavSetting } from '@/api/systemManage'
import { shopManage_systemManage } from '@/utils/permission'
const navData = [
  {
    navName: 'account',
    navText: '关注公众号',
    navId: 'gzhShow',
    navHref: '',
    color: '#FFAA55',
    image: '&#xe77d;',
    enableNav: 1,
    sort: 0,
    icon: 'weixinPublic',
    left: '1',
    top: '5'
  },
  {
    navName: 'online',
    navText: '课程',
    navId: 'online',
    navHref: '/online/all',
    color: '#E3C06E',
    image: '&#xe77f;',
    enableNav: 1,
    sort: 1,
    icon: 'course',
    left: '63',
    top: '5'
  },
  {
    navName: 'vip',
    navText: '升级会员',
    navId: 'upgradeVip',
    navHref: '/user/vipgo',
    color: '#00B479',
    image: '&#xe77c;',
    enableNav: 1,
    sort: 2,
    icon: 'systemVip',
    left: '125',
    top: '5'
  },
  {
    navName: 'addTeacher',
    navText: '班主任',
    navId: 'addTeacher',
    navHref: '',
    color: '#4ABF58',
    image: '&#xe681;',
    enableNav: 1,
    sort: 3,
    icon: 'teacher',
    left: '187',
    top: '5'
  },
  {
    navName: 'spread',
    navText: '推广赚钱',
    navId: 'spread',
    navHref: '/user/promotion',
    color: '#05BF80',
    image: '&#xe780;',
    enableNav: 1,
    sort: 4,
    icon: 'spread',
    left: '249',
    top: '5'
  },
  {
    navName: 'agent',
    navText: '服务商',
    navId: 'agent',
    navHref: '/agent',
    color: '#3891E3',
    image: '&#xe72e;',
    enableNav: 0,
    sort: 5,
    icon: 'agent',
    left: '1',
    top: '71'
  },
  {
    navName: 'is_mall',
    navText: '商城',
    navId: 'mall2',
    navHref: 'mall2',
    color: '#FDA64E',
    image: '&#xe779;',
    enableNav: 0,
    sort: 6,
    icon: 'shop',
    left: '63',
    top: '71'
  },
  {
    navName: 'is_datum',
    navText: '资料下载',
    navId: 'datum',
    navHref: '/datum/detail',
    color: '#59C5EB',
    image: '&#xe77b;',
    enableNav: 0,
    sort: 7,
    icon: 'dataDownload',
    left: '125',
    top: '71'
  },
  {
    navName: 'is_activity',
    navText: '活动',
    navId: 'activity',
    navHref: '/activity',
    color: '#f47660',
    image: '&#xea0b;',
    enableNav: 0,
    sort: 8,
    icon: 'activities',
    left: '187',
    top: '71'
  },
  {
    navName: 'history',
    navText: '观看记录',
    navId: 'history',
    navHref: '/watchRecord',
    color: '#319CEC',
    image: '&#xe77e;',
    enableNav: 1,
    sort: 9,
    icon: 'watchRecord',
    left: '249',
    top: '71'
  },
  {
    navName: 'is_column',
    navText: '专栏',
    navId: 'column',
    navHref: '/column',
    color: '#5ACEF8',
    image: '&#xe77d;',
    enableNav: 0,
    sort: 10,
    icon: 'systemColumn',
    left: '1',
    top: '137'
  },
  {
    navName: 'is_social',
    navText: '社群',
    navId: 'social',
    navHref: '/social/all',
    color: '#3891CA',
    image: '&#xe77a;',
    enableNav: 0,
    sort: 11,
    icon: 'systemSocial',
    left: '63',
    top: '137'
  },
  {
    navName: 'is_exam',
    navText: '测评',
    navId: 'examTopic',
    navHref: '/examination',
    color: '#58C9B5',
    image: '&#xe78f;',
    enableNav: 0,
    sort: 12,
    icon: 'test2',
    left: '125',
    top: '137'
  }
]

export default {
  data() {
    return {
      permission: 3,
      dragging: null,
      radio: 1,
      navData,
      btnLoading: false,
      formLoading: false
    }
  },
  created() {
    this.getModelPermission()
    this.initData()
  },
  methods: {
    getModelPermission() {
      this.permission = shopManage_systemManage()
    },
    initData() {
      getNavSetting().then(res => {
        const resData = res.data.data
        const newData = []
        if (resData && resData.length > 0) {
          let left = 1
          let top = 5
          let count = 0
          for (let i = 0; i < resData.length; i++) {
            if (resData[i].isHidden == 0) {
              const extData = this.findNavExt(resData[i].navId)
              count++
              newData[i] = resData[i]
              newData[i].icon = extData.icon
              newData[i].left = left
              newData[i].top = top
              if (count % 5 == 0 && count != 0) {
                top += 61
                left = 1
              } else {
                left += 62
              }
            }
          }
          this.navData = newData
        }
      }).catch(err => {
        console.log(err)
      })
    },
    findNavExt(navId) {
      const extData = this.navData.filter(element => {
        return element.navId == navId
      }, navId)

      return extData[0]
    },
    handleDragStart(e, item) {
      this.dragging = item
    },
    handleDragEnd(e, item) {
      this.dragging = null
      return false
    },
    // 首先把div变成可以放置的元素，即重写dragenter/dragover
    handleDragOver(e) {
      e = e || window.event
      e.preventDefault ? e.preventDefault() : e.returnValue = false
      // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
      e.dataTransfer.dropEffect = 'move'
      return true
    },
    handleDrop(e, item) {
      e = e || window.event
      e.preventDefault ? e.preventDefault() : e.returnValue = false
      // e.dataTransfer.effectAllowed = 'move' // 为需要移动的元素设置dragstart事件
      e.dataTransfer.effectAllowed = 'move'
      if (item === this.dragging) {
        return
      }
      const newItems = [...this.navData]
      const src = newItems.indexOf(this.dragging)
      const dst = newItems.indexOf(item)
      var left
      var top
      var sort
      // 交换要移动的div的偏移量
      left = this.dragging.left
      this.dragging.left = item.left
      item.left = left
      top = this.dragging.top
      this.dragging.top = item.top
      item.top = top
      sort = this.dragging.sort
      this.dragging.sort = item.sort
      item.sort = sort
      newItems.splice(dst, 0, ...newItems.splice(src, 1))
      this.navData = newItems
      return false
    },
    submitForm() {
      if (this.btnLoading) {
        return
      }
      this.btnLoading = true
      this.formLoading = true
      console.log(this.navData, 'baocun')
      saveNavSetting(this.navData).then(res => {
        this.btnLoading = false
        this.formLoading = false
        this.$message.success('保存成功')
      }).catch(err => {
        this.btnLoading = false
        this.formLoading = false
        console.log(err)
      })
    },
    versions() {
      var u = navigator.userAgent
      console.log('版本', u)
      if (u.indexOf('AppleWebKit') == -1 && u.indexOf('Trident') == -1 && u.indexOf('Presto') == -1) {
        // 苹果、谷歌内核 //opera内核//IE内核
        // this.$message({
        //   type: 'warning',
        //   message: '此浏览器不支持，请您更换为谷歌或者360浏览器'
        // })
        this.$confirm('此浏览器不支持自定义导航栏，请您更换为谷歌或者360浏览器', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      }
    }
  }
}
</script>
<style scoped>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}

	.phone-container {
		width: 348px;
		border: 1px solid #eee;
		margin: 20px 0 20px 50px;
		border-radius: 18px;
		position: relative;
		padding-bottom: 90px;
		float: left;
	}

	.phone-header {
		width: 100%;
		height: 60px;
		background: url("../../../../build/iphone_head.jpg") no-repeat center center;
	}

	.phone-content {
		margin: 0 15px;
		position: relative;
	}

	.phone-content h1 {
		background: url("../../../../build/titlebar.jpg") no-repeat;
		margin: 0;
		padding: 18px 60px 0 60px;
		height: 64px;
		line-height: 46px;
		font-size: 16px;
		color: #fff;
		text-align: center;
		cursor: pointer;
		left: -1px;
		right: -1px;
	}
	.footer-circle{
		position: absolute;
	    bottom: 20px;
	    left: 145px;
	    width: 60px;
	    height: 60px;
	    border: 1px solid #ddd;
	    border-radius: 100%;
	}
	.nav-menu{
		height: 400px;
		border: 1px solid #ccc;
		position: relative;
	}
	/* 图标样式 */
	.font-size40{
		font-size: 40px;
	}
	.font-size12{
		font-size: 12px;
		color: #333;
		margin: 0;
		padding: 5px 0;
	}
	.icon-div{
		cursor: pointer;
	    float: left;
	    padding-top: 0px;
	    font-size: 12px;
	    text-align: center;
	    width: 60px;
    	height: 60px;
	}
	/* 提示框样式 */
	.fl-l{
		float: left;
		width: 270px;
	}
	.inner{
		width: 248px;
		background-color: #F8F8F8;
		border: 1px solid #ddd;
		position: relative;
	    margin-top: 160px;
	    margin-left: 20px;
	    padding: 12px 10px;
	}
	.border-ddd{
		margin: 10px 0 5px 0;
	    padding: 15px;
	    position: relative;
	    border: 1px solid #ddd;
	    background: #FFF;
	    font-size: 14px;
	    text-align: center;
	}
	.arrow-left:after,.arrow-left {
	    width: 0;
	    height: 0;
	    border-style: solid;
	    border-width: 8px 10px 8px 0;
	    border-color: transparent #d1d1d1 transparent transparent;
	    position: absolute;
	    left: -10px;
	    top: 19px;
	}
	.arrow-left:after {
	    content: "";
	    border-right-color: #f8f8f8;
	    left: 1px;
   		 top: -8px;
	}
</style>
